<template>
	<view class="page-container">
		<!-- 导航栏 -->
		<view class="navbar-container">
			<u-navbar @leftClick="onBack" bgColor="transparent" :placeholder="false">
				<view slot="left">
					<u-icon name="arrow-left" color="#fff" size="20"></u-icon>
				</view>
			</u-navbar>
		</view>

		<!-- 头部背景区域 -->
		<view class="header-section">
			<view class="header-bg">
				<image class="header-avatar-bg" mode="aspectFill"
					:src="$utils.imgPath(userInfo.avatar) || '/static/avatar.png'" @error="onHeaderBgError"></image>
			</view>
			<view class="header-overlay"></view>
		</view>

		<!-- 主要内容区域 -->
		<view class="main-content">
			<!-- 用户信息卡片 -->
			<view class="user-profile-card">
				<view class="avatar-section">
					<image class="user-avatar" mode="aspectFill"
						:src="$utils.imgPath(userInfo.avatar) || '/static/avatar.png'" @error="onAvatarError"></image>
					<view v-if="userInfo.type === 9" class="official-badge">
						<u-icon name="checkmark" color="#fff" size="12"></u-icon>
					</view>
				</view>

				<view class="user-basic-info">
					<view class="username">{{ userInfo.nickname || '用户' }}</view>
					<view class="user-intro">{{ userInfo.intro || '这个人很懒，没留下什么' }}</view>
				</view>

				<!-- 数据统计 -->
				<view class="stats-section">
					<view class="stat-item">
						<view class="stat-number">{{ userInfo.follow_num || 0 }}</view>
						<view class="stat-label">关注</view>
					</view>
					<view class="stat-divider"></view>
					<view class="stat-item">
						<view class="stat-number">{{ userInfo.fans_num || 0 }}</view>
						<view class="stat-label">粉丝</view>
					</view>
					<view class="stat-divider"></view>
					<view class="stat-item">
						<view class="stat-number">{{ postList.length || 0 }}</view>
						<view class="stat-label">帖子</view>
					</view>
				</view>

				<!-- 关注按钮 -->
				<view class="action-section">
					<view v-if="!userInfo.is_follow" @click="follow" class="follow-button primary">
						<u-icon name="plus" color="#fff" size="16"></u-icon>
						<text class="button-text">关注</text>
					</view>
					<view v-else @click="cancelFollow" class="follow-button secondary">
						<u-icon name="checkmark" color="#465cff" size="16"></u-icon>
						<text class="button-text">已关注</text>
					</view>
				</view>
			</view>

			<!-- 标签页 -->
			<view class="tabs-container">
				<u-tabs lineColor="#465cff" activeColor="#465cff" inactiveColor="#999" keyName="tab_name" :list="tabs"
					:is-scroll="false" :current="current" @change="tabChange"></u-tabs>
			</view>

			<!-- 内容区域 -->
			<view class="content-section">
				<!-- 主页内容 -->
				<view v-show="current === 0" class="home-content">
					<!-- 基本信息卡片 -->
					<view class="info-card">
						<view class="card-header">
							<view class="card-title">
								<text>基本信息</text>
							</view>
						</view>
						<view class="card-content">
							<view v-if="userInfo.type === 9" class="info-item highlight">
								<view class="info-icon">
									<u-icon name="star-fill" color="#ff6b35" size="16"></u-icon>
								</view>
								<text class="info-text">官方认证账号</text>
							</view>
							<view class="info-item">
								<view class="info-label">性别</view>
								<view class="info-value">{{ getGenderName(userInfo.gender) }}</view>
							</view>
							<view class="info-item">
								<view class="info-label">年龄</view>
								<view class="info-value">{{ calculateAge(userInfo.birthday) }}</view>
							</view>
							<view class="info-item">
								<view class="info-label">个人简介</view>
								<view class="info-value intro">{{ userInfo.intro || '这个人很懒，没留下什么' }}</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 帖子内容 -->
				<view v-show="current === 1" class="posts-content">
					<q-post-list :list="postList" :loadStatus="loadStatus"></q-post-list>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				btnStyle: {
					color: '#fff',
					backgroundColor: '#efd234'
				},
				background: {
					backgroundColor: 'unset'
				},
				tabs: [{
						tab_name: '主页'
					},
					{
						tab_name: '帖子'
					}
				],
				current: 0,
				userId: null,
				postList: [],
				userInfo: {
					tag_str: []
				},
				loadStatus: 'loading',
				page: 1,
				genderActions: [{
						value: 0,
						name: '保密',
					},
					{
						value: 1,
						name: '男生',
					},
					{
						value: 2,
						name: '女生',
					}
				],
			};
		},
		onLoad(options) {
			this.userId = options.user_id;
			this.getUserInfo();
			this.getPostList();
		},
		onReachBottom() {
			if (this.current == 1) {
				this.page++;
				this.getPostList();
			}
		},
		methods: {
			getGenderName(value) {
				// 遍历数组查找匹配的对象
				const gender = this.genderActions.find(item => item.value === value);
				// 如果找到则返回name，否则返回默认值
				return gender ? gender.name : '未知性别';
			},
			onBack() {
				uni.navigateBack();
			},
			follow() {
				this.$H
					.post('user/addFollow', {
						user_id: this.userInfo.id
					})
					.then(res => {
						if (res.code == 200) {
							this.userInfo.is_follow = true;
						}
					});
			},
			cancelFollow() {
				this.$H
					.post('user/cancelFollow', {
						user_id: this.userInfo.id
					})
					.then(res => {
						if (res.code == 200) {
							this.userInfo.is_follow = false;
						}
					});
			},
			tabChange(e) {
				this.current = e.index;
			},
			getPostList() {
				this.loadStatus = 'loading';
				this.$H
					.get('post/list', {
						page: this.page,
						user_id: this.userId
					})
					.then(res => {
						this.postList = this.postList.concat(res.result.list);
						if (res.result.hasMorePages) {
							this.loadStatus = 'loadmore';
						} else {
							this.loadStatus = 'nomore';
						}
					});
			},
			getUserInfo() {
				this.$H.get('user/infoByUserId', {
					user_id: this.userId
				}).then(res => {
					this.userInfo = res.result;

					uni.setNavigationBarTitle({
						title: this.userInfo.nickname || this.userInfo.username
					});

					this.loading = false;
				});
			},
			onAvatarError(e) {
				// 头像加载失败时设置默认头像
				e.target.src = '/static/avatar.png';
			},
			onHeaderBgError(e) {
				// 头部背景头像加载失败时设置默认头像
				e.target.src = '/static/avatar.png';
			},
			calculateAge(birthday) {
				// 如果生日为空或无效，返回保密
				if (!birthday) {
					return '保密';
				}

				try {
					// 解析生日日期
					const birthDate = new Date(birthday);
					const today = new Date();

					// 检查日期是否有效
					if (isNaN(birthDate.getTime())) {
						return '保密';
					}

					// 计算年龄
					let age = today.getFullYear() - birthDate.getFullYear();
					const monthDiff = today.getMonth() - birthDate.getMonth();

					// 如果还没到生日，年龄减1
					if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
						age--;
					}

					// 确保年龄为正数且合理
					if (age < 0 || age > 150) {
						return '保密';
					}

					return age + '岁';
				} catch (error) {
					console.error('计算年龄时出错:', error);
					return '保密';
				}
			}
		}
	};
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.page-container {
		min-height: 100vh;
		background-color: #f8f9fa;
		position: relative;
	}

	.navbar-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
	}

	.header-section {
		position: relative;
		height: 320rpx;
		overflow: hidden;

		.header-bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.05);
			overflow: hidden;

			.header-avatar-bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				filter: blur(5rpx);
				transform: scale(1.1);
				opacity: 0.4;
			}
		}

		.header-overlay {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(180deg, rgba(70, 92, 255, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%);
			backdrop-filter: blur(2rpx);
		}
	}

	.main-content {
		position: relative;
		margin-top: -80rpx;
		padding: 0 30rpx;
		z-index: 10;
	}

	.user-profile-card {
		background: #fff;
		border-radius: 24rpx;
		padding: 40rpx 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 8rpx 32rpx rgba(70, 92, 255, 0.15);
		border: 1rpx solid rgba(70, 92, 255, 0.1);

		.avatar-section {
			position: relative;
			display: flex;
			justify-content: center;
			margin-bottom: 30rpx;

			.user-avatar {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				border: 6rpx solid #fff;
				box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
			}

			.official-badge {
				position: absolute;
				bottom: 8rpx;
				right: calc(50% - 70rpx - 8rpx);
				width: 32rpx;
				height: 32rpx;
				background: #ff6b35;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 3rpx solid #fff;
			}
		}

		.user-basic-info {
			text-align: center;
			margin-bottom: 40rpx;

			.username {
				font-size: 40rpx;
				font-weight: 700;
				color: #1a1a1a;
				margin-bottom: 12rpx;
			}

			.user-intro {
				font-size: 28rpx;
				color: #666;
				line-height: 1.5;
				max-width: 500rpx;
				margin: 0 auto;
			}
		}

		.stats-section {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 40rpx;
			padding: 30rpx 0;
			background: #f8f9ff;
			border-radius: 16rpx;

			.stat-item {
				flex: 1;
				text-align: center;

				.stat-number {
					font-size: 36rpx;
					font-weight: 700;
					color: #465cff;
					margin-bottom: 8rpx;
				}

				.stat-label {
					font-size: 24rpx;
					color: #999;
				}
			}

			.stat-divider {
				width: 1rpx;
				height: 40rpx;
				background: #e0e0e0;
			}
		}

		.action-section {
			display: flex;
			justify-content: center;

			.follow-button {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 8rpx;
				padding: 20rpx 48rpx;
				border-radius: 50rpx;
				transition: all 0.3s ease;
				min-width: 200rpx;

				&.primary {
					background: linear-gradient(135deg, #465cff 0%, #6c7cff 100%);
					box-shadow: 0 4rpx 16rpx rgba(70, 92, 255, 0.3);

					.button-text {
						color: #fff;
						font-size: 28rpx;
						font-weight: 600;
					}
				}

				&.secondary {
					background: #f8f9ff;
					border: 2rpx solid #465cff;

					.button-text {
						color: #465cff;
						font-size: 28rpx;
						font-weight: 600;
					}
				}
			}
		}
	}

	.tabs-container {
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 30rpx;
		padding: 0 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.content-section {
		.home-content {
			.info-card {
				background: #fff;
				border-radius: 20rpx;
				overflow: hidden;
				box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
				border: 1rpx solid #f0f0f0;

				.card-header {
					padding: 30rpx 30rpx 20rpx;
					border-bottom: 1rpx solid #f5f5f5;

					.card-title {
						display: flex;
						align-items: center;
						gap: 12rpx;

						text {
							font-size: 32rpx;
							font-weight: 600;
							color: #1a1a1a;
						}
					}
				}

				.card-content {
					padding: 30rpx;

					.info-item {
						display: flex;
						align-items: center;
						padding: 20rpx 0;
						border-bottom: 1rpx solid #f8f9fa;

						&:last-child {
							border-bottom: none;
						}

						&.highlight {
							background: linear-gradient(135deg, #fff5f2 0%, #fff8f5 100%);
							border-radius: 12rpx;
							padding: 20rpx;
							margin-bottom: 20rpx;
							border: 1rpx solid #ffe4d6;

							.info-icon {
								margin-right: 12rpx;
							}

							.info-text {
								font-size: 28rpx;
								color: #ff6b35;
								font-weight: 600;
							}
						}

						.info-label {
							font-size: 28rpx;
							color: #666;
							width: 140rpx;
							flex-shrink: 0;
						}

						.info-value {
							font-size: 28rpx;
							color: #1a1a1a;
							flex: 1;

							&.intro {
								line-height: 1.6;
								color: #666;
							}
						}
					}
				}
			}
		}

		.posts-content {
			padding-bottom: 40rpx;
		}
	}
</style>